<template>
  <el-card class="content-card">
    <div class="el-descriptions__header">
      <div class="el-descriptions__title">受益人信息 <span class="tips">(需要填写持股大于等于25%以上的股东信息)</span></div>
    </div>
    <el-button type="primary" plain round icon="Plus" size="small" @click="handleAddBeneficiaary">添加</el-button> <span>最多添加4个</span>
    <el-form ref="formRef" :disabled="readonly" :model="beneficiaryData" :rules="formRules" label-width="120px">
      <div v-for="(item, index) in beneficiaryData.beneficiary" :key="index">
        <div style="margin-top:10px;margin-bottom: 20px">受益人 {{index+1}} <el-icon v-if="beneficiaryData.beneficiary.length > 1" style="float:right;" @click="handleDelte(index)"><Delete /></el-icon></div>
        <el-form-item label="受益人姓名：" :prop="'beneficiary.' + index + '.name'" :rules="getValidationRules(index)">
          <el-input v-model="item.name" placeholder="请输入受益人姓名"/>
        </el-form-item>
        <el-form-item label="身份证号：" :prop="'beneficiary.' + index + '.idcard_num'" :rules="getValidationRules(index)">
          <el-input v-model="item.idcard_num" placeholder="请输入受益人身份证号"/>
        </el-form-item>
        <el-form-item label="持股比例：" :prop="'beneficiary.' + index + '.stock_radio'" :rules="getValidationRules(index)">
          <el-input v-model="item.stock_radio" placeholder="请输入持股比例"/>
        </el-form-item>
        <el-form-item label="开始日期：" :prop="'beneficiary.' + index + '.start_date'" :rules="getValidationRules(index)">
          <el-date-picker v-model="item.start_date"
                          class="card-header-extra-action"
                          clearable
                          format="YYYY-MM-DD"
                          placeholder="开始日期"
                          type="date"
                          value-format="YYYY-MM-DD"/>
        </el-form-item>
        <el-form-item label="结束日期：" :prop="'beneficiary.' + index + '.end_date'" :rules="getValidationRules(index)">
          <el-date-picker v-model="item.end_date"
                          class="card-header-extra-action"
                          clearable
                          format="YYYY-MM-DD"
                          placeholder="结束日期"
                          type="date"
                          value-format="YYYY-MM-DD"/>
        </el-form-item>
        <el-divider />
      </div>

    </el-form>
  </el-card>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { ElLoading, FormInstance, FormRules ,ElMessage} from 'element-plus';
import { BeneficiaryData } from '@/api/common.ts';
const beneficiaryData = defineModel<BeneficiaryData>({required: true});
const props = defineProps({
  readonly: {
    type: Boolean,
    default: false
  },
});
const formRef = ref<FormInstance>();
const formRules = reactive<FormRules>({

});
const getValidationRules = (index: number) => {
  return [
    { required: true, message: '不能为空', trigger: 'blur' }
  ];
};
//添加受益人
const handleAddBeneficiaary=()=>{
  if(beneficiaryData.value.beneficiary.length<4){
    beneficiaryData.value.beneficiary.push({
      name:'',
      stock_radio:'',
      idcard_num:'',
      start_date:'',
      end_date:''
    })
  }else{
    ElMessage({
      message: '最多添加4个受益人',
      type: 'warning',
    })
  }
}
//删除受益人
const handleDelte=(index<number>)=>{
    beneficiaryData.value.beneficiary.splice(index,1)
}
/** 表单重置 */
const formReset = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
};

/** 表单验证 */
const formValidate = () => {
  if (!formRef.value) return
  return formRef.value.validate()
};

/** 对外提供方法 */
defineExpose({
  formReset,
  formValidate,
});
</script>

<style lang="scss" scoped>
.tips{
  font-size: 12px;
  margin-left: 5px;
  color: #666;
}
</style>
